<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tree list ComboBox</title>

<style type="text/css">
@import "lib/dojotoolkit/dojo/resources/dojo.css";
@import "lib/dojotoolkit/dijit/themes/tundra/tundra.css";

body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel {
    border: 1px solid blue;
    width: 400px;
    margin: 10px;
    padding: 10px;
}

#debugPanel h2 {
    background-color: #F3F9FF;
    color: #336699;
    margin: 0px;
    padding: 0px;
}

div.container {
    border: 1px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "zh",
    extraLocale: ["en"]
};
</script>
<script type="text/javascript" src="lib/dojotoolkit/dojo/dojo.js"></script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.CheckBox");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.RadioButton");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.TitlePane");

    dojo.require("dijit.tree.ForestStoreModel");
    dojo.require("dijit.Tree");

    dojo.require("com.ibm.ria.TreeComboBox");
</script>
<script type="text/javascript">
function getDebugMsg() {
    var args = [];
    for (var i = 0; i< arguments.length; i += 1) {
        args.push(arguments[i]);
    }
    var msg = args.join(" ");
    return msg;
}

function debug(messages) {
    var msg = getDebugMsg.apply(null, arguments);
    console.debug(msg);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function append(messages) {
    var msg = getDebugMsg.apply(null, arguments);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML += "\n" + msg;
}

function show(id) {
    var element = dojo.byId(id);
    if (element.style.display === "none") {
        element.style.display = "";
    }
}

function hide(id) {
    var element = dojo.byId(id);
    element.style.display = "none";
}
</script>
<style type="text/css">
@import "css/rounded-button.css";
@import "css/rounded-corners.css";

body {
    padding: 10px;
}

.TreeComboBoxPopUp {
    min-width: 100px;
    min-height: 50px;
    max-width: 400px;
    max-height: 400px;
    overflow: auto;
    border: 1px solid black;
}

.tundra .dijitTreeNodeSelected .dijitTreeLabel {
/*
    background-color: #BEEBFF;
    background-color: #E7F4F9;
*/
    background-color: #3559ac;
    color: white;
}

.tundra .dijitTreeNodeHover {
    /*background-image: none;
    background-color: #3559ac;
    color: white;*/
}
</style>
<script type="text/javascript">
dojo.addOnLoad(function() {
    debug("loaded");

    var tree = dijit.byId("tree");
    dojo.connect(dijit.byId("productList"), "onChange", function(value) {
        debug("productList: "+ value);
    });
    dojo.connect(dijit.byId("treeComboBox"), "onChange", function(value) {
        debug("treeComboBox: "+ value);
    });

});

function changeStore(store, query) {
    var treeComboBox = dijit.byId("treeComboBox");
    treeComboBox.attr("store", store);
    treeComboBox.attr("query", query);

    var combobox = dijit.byId("productList");
    combobox.attr("store", store);
    combobox.attr("query", query);

    reloadTree(createTreeModel(store, query));
}

function changeQuery(query) {
    var productList = dijit.byId("productList");
    productList.attr("query", query);

    var treeComboBox = dijit.byId("treeComboBox");
    treeComboBox.attr("query", query);

    var tree = dijit.byId("tree");

    tree.model.query = query;
    tree.model._requeryTop();

    //tree.model.root.children = null;
    //tree.model.getChildren(tree.model.root, function(items){});
    //tree.model.onChange(); // invoke tree to update
    //reloadTree(createTreeModel(store, query));
}

function focusNode(identity) {
    var treeComboBox = dijit.byId("treeComboBox");
    treeComboBox.attr("identity", identity);
}

function createTreeModel(store, query) {
    // create tree model
    var treeModel = new dijit.tree.ForestStoreModel({
        store: store,
        query: query,
        rootId: "root",
        rootLabel: "Items",
        childrenAttrs: ["children"]
    });

    return treeModel;
}

function reloadTree(treeModel) {
    var tree = dijit.byId("tree");

    //tree.model.destroy();
    tree.model.constructor(treeModel);

    // remember path
    //var path = tree._getPathAttr();
    //console.debug("path", path);

    // remove the rootNode 
    if (tree.rootNode) {
        tree.rootNode.destroyRecursive();
    }

    // reset the state of the rootNode
    tree.rootNode.state = "UNCHECKED";

    // reset the tree.model
    tree.attr("model", treeModel);

    // rebuild the tree
    tree.postMixInProperties();
    tree._load();
    //path = tree._setPathAttr(path);
}

</script>
</head>
<body class="tundra">
  <div id="debugPanel">
    <h2>Debug Panel</h2>
    <div id="debugPanelContent"></div>
  </div>
  <hr />

  <div id="main" class="container">
    <div dojoType="dojo.data.ItemFileReadStore" jsId="nodeStore" url="./data/tree.json"></div>
    <div dojoType="dojo.data.ItemFileWriteStore" jsId="countryStore" url="./data/countries.json"></div>
    <div dojoType="dojo.data.ItemFileWriteStore" jsId="productGroupStore" url="./data/product_groups.json"></div>

    <div dojoType="dijit.tree.ForestStoreModel" jsId="treeModel" store="countryStore" rootId="$root$" rootLabel="ROOT" childrenAttrs="children" deferItemLoadingUntilExpand="true" query="{type:'continent'}"></div>

    <!-- ComboBox -->
    <div dojoType="dojo.dnd.Moveable">
      <div dojoType="dijit.TitlePane" title="ComboBox" style="width: 300px;">
        <input id="productList" dojoType="dijit.form.ComboBox" value="---- Select an item ----" store="nodeStore" searchAttr="name" query="{type:'PARENT'}" />
      </div>
    </div>
    <!-- Tree -->
    <div class="TreeComboBoxPopUp">
      <div id="tree" dojoType="dijit.Tree"model="treeModel" showRoot="false" persist="false"></div>
    </div>
    <hr />

    <input id="nodeList" dojoType="com.ibm.ria.TreeComboBox" value="---- Select an option ----" store="nodeStore" searchAttr="name" query="{type:'PARENT'}" style="width: 120px;" />

    <hr />


    <!-- TreeComboBox -->
    <div dojoType="dojo.dnd.Moveable">
      <div dojoType="dijit.TitlePane" title="TreeComboBox" style="width: 300px;">
        <input id="treeComboBox" dojoType="com.ibm.ria.TreeComboBox" value="-- Select a product group --" store="productGroupStore" searchAttr="name" query="{type:'group'}" />
      </div>
    </div>

    <hr />
    <div dojoType="dijit.form.Button" onClick="changeStore(nodeStore, {type:'PARENT'});">Show nodes</div>
    <div dojoType="dijit.form.Button" onClick="changeStore(countryStore, {type:'continent'});">Show countries</div>
    <div dojoType="dijit.form.Button" onClick="changeStore(productGroupStore, {type:'group'});">Show product groups</div>
    <div dojoType="dijit.form.Button" onClick="changeQuery({type:'*'});">Query *</div>
    <div dojoType="dijit.form.Button" onClick="changeQuery({type:'continent'});">Query type='continent'</div>
    <div dojoType="dijit.form.Button" onClick="changeQuery({type:'group'});">Query type='group'</div>
    <div dojoType="dijit.form.Button" onClick="focusNode('EBZAll_SmartBusiness_Divisional_Roll_UpiU');">focus SmartBusiness</div>
    <div dojoType="dijit.form.Button" onClick="focusNode('EB3JazzNA');">focus Jazz</div>
    <div dojoType="dijit.form.Button" onClick="focusNode('US');">focus USA</div>
    <div dojoType="dijit.form.Button" onClick="focusNode('CN');">focus China</div>

  </div>
</body>
</html>
